<template>
  <div class="container">
    <el-dialog
      :visible.sync="dialogVisible"
      width="900px"
      :title="fileName ? '预览文件：' + fileName : '预览文件'"
      :before-close="closeDialog"
      top="30px"
    >
      <div class="dialogContent">
        <PdfPreview :fileSrc="fileSrc" v-if="fileType == 'PDF'"></PdfPreview>
        <!-- <DocPreview :fileSrc="fileSrc" v-else-if="fileType=='Word'"></DocPreview> -->
        <PPTPreview
          :fileSrc="fileSrc"
          v-else-if="fileType == 'PowerPoint' || fileType == 'Word'"
        ></PPTPreview>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PdfPreview from "./PdfPreview.vue";
import DocPreview from "./DocPreview.vue";
import PPTPreview from "./PPTPreview.vue";
export default {
  name: "OfficePreviewDialog",
  components: {
    PdfPreview,
    DocPreview,
    PPTPreview,
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    fileSrc: {
      type: String,
      default: "",
    },
    fileName: {
      type: String,
      default: "",
    },
  },
  watch: {
    fileSrc: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        if (newValue) {
          const fileExtension = newValue.split(".").pop().toLowerCase();
          //console.log("fileExtension", fileExtension);

          const fileTypes = {
            pdf: "PDF",
            doc: "Word",
            docx: "Word",
            ppt: "PowerPoint",
            pptx: "PowerPoint",
            xls: "Excel",
            xlsx: "Excel",
          };
          if (fileTypes[fileExtension]) {
            this.fileType = fileTypes[fileExtension];
          } else {
            return "Unknown File Type";
          }
          //console.log("fileType", this.fileType);
        } else {
          this.$message.error("无法读取当前文件");
          setTimeout(() => {
            this.closeDialog();
          }, 1500);
        }
      },
    },
  },
  data() {
    return {
      fileType: "doc",
    };
  },
  methods: {
    closeDialog() {
      this.$emit("update:dialogVisible", false);
    },
  },
};
</script>

<style scoped lang="scss">
.dialogContent {
  display: flex;
  flex-wrap: nowrap;
  // border-radius: 8px;
  max-height: 80vh;
  min-height: 80vh;
  overflow-y: scroll;
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}
::v-deep .el-dialog__body {
  padding-top: 0px;
}
</style>
